//定义一个轮播图类
class Carousel {
    constructor(tag) {
        //获取目标元素
        this.tag = document.querySelector(tag);
        //获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        //获取小圆点
        this.spanBtn = this.tag.querySelector(".dot_box");
        // this.dotActive = this.tag.querySelector(".dot_active");
        this.dot = this.tag.querySelectorAll("span");
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box>ul>li");
        //获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        //触发绑定事件
        this.eventFn();
        this.index = 0;
        this.lastIndex = 0;

        //轮播图
        this.timer;
        this.timeFn();
        this.timerFn();
        this.rBtnFn();
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });
    };
    //封装往右轮播
    rBtnFn() {
        //操作数组
        //添加数组最后值到第一个值
        this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
        //删除数组的最后一个值
        this.listClassName.pop();
        // li全部重新设置类名
        this.restListFn();
        if (this.index == 4) {
            this.index = 0
        }
        this.dot[this.lastIndex].className = '';
        this.dot[this.index].className = "dot_active";

        this.lastIndex = this.index++;
    };

    //点击按钮
    eventFn() {
            //左边
            this.lBtn.addEventListener("click", () => {
                //操作数组
                //添加数组第一个值到最后
                this.listClassName.push(this.listClassName[0]);
                //删除数字的第一个值
                this.listClassName.shift();
                // li全部重新设置类名
                this.restListFn();

                if (this.index == 0) {
                    this.index = 4
                }

                // console.log(this.index);

                this.dot[this.lastIndex].className = '';

                this.dot[--this.index].className = "dot_active";

                this.lastIndex = this.index;

            });
            //右边
            this.rBtn.addEventListener("click", () => {
                //操作数组
                // this.index;
                //添加数组最后值到第一个值
                this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                //删除数组的最后一个值
                this.listClassName.pop();
                // li全部重新设置类名
                this.restListFn();

                if (this.index == 4) {
                    this.index = 0
                }
                this.dot[this.lastIndex].className = '';
                this.dot[this.index].className = "dot_active";

                this.lastIndex = this.index++;
            });

            //小圆点
            this.spanBtn.addEventListener("click", () => {
                //操作数组
                //添加数组最后值到第一个值
                this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                //删除数组的最后-个值
                this.listClassName.pop();
                // li全部重新设置类名
                this.restListFn();
            });


        }
        // 自动轮播
    timeFn() {
            if (this.timer) {
                clearInterval(this.timer)
            }
            this.timer = setInterval(() => {
                this.rBtnFn();
            }, 1000)
        }
        // 定时器
    timerFn() {
        // console.log();
        let _this = this;
        this.tag.addEventListener("mouseenter", () => {
            clearInterval(this.timer);
        });
        this.tag.addEventListener("mouseleave", () => {
                setTimeout(this.timeFn(), 2000)
            })
            // 检测页面是否切换，切换就停止定时器
        window.addEventListener("visibilitychange", () => {
            if (document.hidden) {
                clearInterval(_this.timer);
            } else {
                _this.timeFn();
            }
        });

    }

}